<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>梦幻西游数字资产管理系统 - 系统设置</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Microsoft YaHei', Arial, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; }
        .container { display: flex; min-height: 100vh; }
        .sidebar { width: 220px; background: rgba(255, 255, 255, 0.95); box-shadow: 2px 0 10px rgba(0,0,0,0.1); padding: 20px 0; }
        .logo { text-align: center; padding: 20px; font-size: 20px; font-weight: bold; color: #667eea; border-bottom: 2px solid #f0f0f0; margin-bottom: 20px; }
        .nav-menu { list-style: none; }
        .nav-item { padding: 15px 30px; cursor: pointer; transition: all 0.3s; display: flex; align-items: center; color: #333; }
        .nav-item:hover { background: #f5f5f5; border-left: 4px solid #667eea; padding-left: 26px; }
        .nav-item.active { background: #667eea; color: white; border-left: 4px solid #764ba2; }
        .nav-icon { margin-right: 10px; font-size: 18px; }
        .main-content { flex: 1; padding: 30px; overflow-y: auto; }
        .header { background: white; padding: 20px 30px; border-radius: 10px; margin-bottom: 30px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
        .header h1 { color: #333; font-size: 24px; }
        
        /* 设置布局 */
        .settings-layout { display: grid; grid-template-columns: 200px 1fr; gap: 20px; }
        
        /* 设置侧边栏 */
        .settings-sidebar { background: white; border-radius: 10px; padding: 20px 0; box-shadow: 0 2px 10px rgba(0,0,0,0.1); height: fit-content; }
        .settings-menu { list-style: none; }
        .settings-menu-item { padding: 12px 20px; cursor: pointer; transition: all 0.3s; color: #666; display: flex; align-items: center; gap: 10px; }
        .settings-menu-item:hover { background: #f5f5f5; color: #667eea; }
        .settings-menu-item.active { background: #f0f5ff; color: #667eea; border-right: 3px solid #667eea; font-weight: 600; }
        
        /* 设置内容区 */
        .settings-content { background: white; border-radius: 10px; padding: 30px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
        .section-title { font-size: 20px; font-weight: bold; color: #333; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 2px solid #f0f0f0; }
        
        /* 设置项 */
        .setting-group { margin-bottom: 30px; }
        .group-title { font-size: 16px; font-weight: 600; color: #333; margin-bottom: 15px; display: flex; align-items: center; gap: 8px; }
        .setting-item { padding: 15px 0; border-bottom: 1px solid #f5f5f5; display: flex; justify-content: space-between; align-items: center; }
        .setting-item:last-child { border-bottom: none; }
        .setting-info { flex: 1; }
        .setting-label { font-weight: 500; color: #333; margin-bottom: 5px; }
        .setting-desc { font-size: 13px; color: #999; }
        
        /* 表单控件 */
        .form-input { padding: 8px 12px; border: 2px solid #e8e8e8; border-radius: 6px; font-size: 14px; min-width: 250px; transition: border-color 0.3s; }
        .form-input:focus { outline: none; border-color: #667eea; }
        select.form-input { cursor: pointer; }
        
        /* 开关按钮 */
        .switch { position: relative; display: inline-block; width: 50px; height: 26px; }
        .switch input { opacity: 0; width: 0; height: 0; }
        .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 26px; }
        .slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
        input:checked + .slider { background-color: #52c41a; }
        input:checked + .slider:before { transform: translateX(24px); }
        
        /* 按钮 */
        .btn { padding: 10px 20px; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; transition: all 0.3s; }
        .btn-primary { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; }
        .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4); }
        .btn-secondary { background: white; color: #666; border: 2px solid #e8e8e8; }
        .btn-secondary:hover { border-color: #667eea; color: #667eea; }
        .btn-danger { background: #f5222d; color: white; }
        .btn-danger:hover { background: #cf1322; }
        
        /* 任务模板表格 */
        .template-table { width: 100%; border-collapse: collapse; margin-top: 15px; }
        .template-table th { background: #fafafa; padding: 12px; text-align: left; font-weight: 600; color: #666; font-size: 13px; border-bottom: 2px solid #f0f0f0; }
        .template-table td { padding: 12px; border-bottom: 1px solid #f5f5f5; font-size: 14px; }
        .template-table tr:hover { background: #fafafa; }
        .priority-badge { display: inline-block; padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 500; }
        .priority-high { background: #fff1f0; color: #f5222d; }
        .priority-medium { background: #fff7e6; color: #faad14; }
        .priority-low { background: #f0f5ff; color: #597ef7; }
        
        /* 操作链接 */
        .action-link { color: #667eea; text-decoration: none; margin-right: 15px; cursor: pointer; transition: color 0.3s; }
        .action-link:hover { color: #764ba2; text-decoration: underline; }
        
        /* 用户信息卡片 */
        .user-info-card { background: #f9f9f9; padding: 20px; border-radius: 8px; margin-bottom: 20px; display: flex; align-items: center; gap: 20px; }
        .user-avatar-large { width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; font-size: 32px; color: white; }
        .user-details { flex: 1; }
        .user-name { font-size: 20px; font-weight: bold; color: #333; margin-bottom: 5px; }
        .user-email { font-size: 14px; color: #999; }
        
        /* 备份卡片 */
        .backup-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; margin-top: 15px; }
        .backup-card { padding: 20px; border: 2px solid #e8e8e8; border-radius: 8px; text-align: center; cursor: pointer; transition: all 0.3s; }
        .backup-card:hover { border-color: #667eea; box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2); }
        .backup-icon { font-size: 40px; margin-bottom: 10px; }
        .backup-label { font-weight: 600; color: #333; margin-bottom: 5px; }
        .backup-desc { font-size: 13px; color: #999; }
    </style>
</head>
<body>
    <div class="container">
        <!-- 侧边栏 -->
        <div class="sidebar">
            <div class="logo">⚔️ 梦幻资管系统</div>
            <ul class="nav-menu">
                <li class="nav-item" onclick="location.href='index.html'">
                    <span class="nav-icon">🏠</span><span>首页仪表盘</span>
                </li>
                <li class="nav-item" onclick="location.href='accounts.html'">
                    <span class="nav-icon">👤</span><span>账号管理</span>
                </li>
                <li class="nav-item" onclick="location.href='roles.html'">
                    <span class="nav-icon">🎮</span><span>角色管理</span>
                </li>
                <li class="nav-item" onclick="location.href='tasks.html'">
                    <span class="nav-icon">📋</span><span>任务中心</span>
                </li>
                <li class="nav-item" onclick="location.href='assets.html'">
                    <span class="nav-icon">💰</span><span>资产管理</span>
                </li>
                <li class="nav-item" onclick="location.href='statistics.html'">
                    <span class="nav-icon">📊</span><span>数据统计</span>
                </li>
                <li class="nav-item active">
                    <span class="nav-icon">⚙️</span><span>系统设置</span>
                </li>
            </ul>
        </div>
        
        <!-- 主内容区 -->
        <div class="main-content">
            <!-- 头部 -->
            <div class="header">
                <h1>⚙️ 系统设置</h1>
            </div>
            
            <!-- 设置布局 -->
            <div class="settings-layout">
                <!-- 设置侧边栏 -->
                <div class="settings-sidebar">
                    <ul class="settings-menu">
                        <li class="settings-menu-item active" data-section="general">
                            <span>🎨</span><span>通用设置</span>
                        </li>
                        <li class="settings-menu-item" data-section="account">
                            <span>👤</span><span>账号信息</span>
                        </li>
                        <li class="settings-menu-item" data-section="notification">
                            <span>🔔</span><span>通知提醒</span>
                        </li>
                        <li class="settings-menu-item" data-section="task">
                            <span>📋</span><span>任务模板</span>
                        </li>
                        <li class="settings-menu-item" data-section="backup">
                            <span>💾</span><span>数据备份</span>
                        </li>
                        <li class="settings-menu-item" data-section="security">
                            <span>🔒</span><span>安全设置</span>
                        </li>
                        <li class="settings-menu-item" data-section="about">
                            <span>ℹ️</span><span>关于系统</span>
                        </li>
                    </ul>
                </div>
                
                <!-- 设置内容区 -->
                <div class="settings-content">
                    <!-- 通用设置 -->
                    <div id="general-section">
                        <div class="section-title">🎨 通用设置</div>
                        
                        <div class="setting-group">
                            <div class="group-title">🖼️ 界面显示</div>
                            
                            <div class="setting-item">
                                <div class="setting-info">
                                    <div class="setting-label">主题模式</div>
                                    <div class="setting-desc">切换浅色/深色主题</div>
                                </div>
                                <select class="form-input">
                                    <option>浅色模式</option>
                                    <option>深色模式</option>
                                    <option>跟随系统</option>
                                </select>
                            </div>
                            
                            <div class="setting-item">
                                <div class="setting-info">
                                    <div class="setting-label">语言设置</div>
                                    <div class="setting-desc">选择界面显示语言</div>
                                </div>
                                <select class="form-input">
                                    <option>简体中文</option>
                                    <option>繁体中文</option>
                                    <option>English</option>
                                </select>
                            </div>
                            
                            <div class="setting-item">
                                <div class="setting-info">
                                    <div class="setting-label">默认视图</div>
                                    <div class="setting-desc">角色管理页面默认显示方式</div>
                                </div>
                                <select class="form-input">
                                    <option>卡片视图</option>
                                    <option>列表视图</option>
                                </select>
                            </div>
                        </div>
                        
                        <div class="setting-group">
                            <div class="group-title">⏰ 系统行为</div>
                            
                            <div class="setting-item">
                                <div class="setting-info">
                                    <div class="setting-label">自动刷新</div>
                                    <div class="setting-desc">首页数据自动刷新间隔</div>
                                </div>
                                <select class="form-input">
                                    <option>不自动刷新</option>
                                    <option>每5分钟</option>
                                    <option>每10分钟</option>
                                    <option>每30分钟</option>
                                </select>
                            </div>
                            
                            <div class="setting-item">
                                <div class="setting-info">
                                    <div class="setting-label">启动时打开</div>
                                    <div class="setting-desc">系统启动时默认打开的页面</div>
                                </div>
                                <select class="form-input">
                                    <option>首页仪表盘</option>
                                    <option>任务中心</option>
                                    <option>角色管理</option>
                                </select>
                            </div>
                            
                            <div class="setting-item">
                                <div class="setting-info">
                                    <div class="setting-label">开机自启动</div>
                                    <div class="setting-desc">Windows启动时自动运行系统</div>
                                </div>
                                <label class="switch">
                                    <input type="checkbox">
                                    <span class="slider"></span>
                                </label>
                            </div>
                        </div>
                        
                        <div style="margin-top: 30px;">
                            <button class="btn btn-primary">保存设置</button>
                            <button class="btn btn-secondary" style="margin-left: 10px;">恢复默认</button>
                        </div>
                    </div>
                    
                    <!-- 账号信息 -->
                    <div id="account-section" style="display:none;">
                        <div class="section-title">👤 账号信息</div>
                        
                        <div class="user-info-card">
                            <div class="user-avatar-large">管</div>
                            <div class="user-details">
                                <div class="user-name">管理员</div>
                                <div class="user-email">admin@mhgame.com</div>
                            </div>
                            <button class="btn btn-secondary">更换头像</button>
                        </div>
                        
                        <div class="setting-group">
                            <div class="group-title">📝 基本信息</div>
                            
                            <div class="setting-item">
                                <div class="setting-info">
                                    <div class="setting-label">用户名</div>
                                </div>
                                <input type="text" class="form-input" value="管理员">
                            </div>
                            
                            <div class="setting-item">
                                <div class="setting-info">
                                    <div class="setting-label">邮箱</div>
                                </div>
                                <input type="email" class="form-input" value="admin@mhgame.com">
                            </div>
                            
                            <div class="setting-item">
                                <div class="setting-info">
                                    <div class="setting-label">手机号</div>
                                </div>
                                <input type="tel" class="form-input" value="138****8888">
                            </div>
                        </div>
                        
                        <div class="setting-group">
                            <div class="group-title">🔐 密码修改</div>
                            
                            <div class="setting-item">
                                <div class="setting-info">
                                    <div class="setting-label">当前密码</div>
                                </div>
                                <input type="password" class="form-input" placeholder="请输入当前密码">
                            </div>
                            
                            <div class="setting-item">
                                <div class="setting-info">
                                    <div class="setting-label">新密码</div>
                                </div>
                                <input type="password" class="form-input" placeholder="请输入新密码">
                            </div>
                            
                            <div class="setting-item">
                                <div class="setting-info">
                                    <div class="setting-label">确认新密码</div>
                                </div>
                                <input type="password" class="form-input" placeholder="再次输入新密码">
                            </div>
                        </div>
                        
                        <div style="margin-top: 30px;">
                            <button class="btn btn-primary">保存修改</button>
                        </div>
                    </div>
                    
                    <!-- 通知提醒 -->
                    <div id="notification-section" style="display:none;">
                        <div class="section-title">🔔 通知提醒</div>
                        
                        <div class="setting-group">
                            <div class="group-title">📢 桌面通知</div>
                            
                            <div class="setting-item">
                                <div class="setting-info">
                                    <div class="setting-label">启用桌面通知</div>
                                    <div class="setting-desc">允许系统发送桌面通知</div>
                                </div>
                                <label class="switch">
                                    <input type="checkbox" checked>
                                    <span class="slider"></span>
                                </label>
                            </div>
                            
                            <div class="setting-item">
                                <div class="setting-info">
                                    <div class="setting-label">任务提醒</div>
                                    <div class="setting-desc">未完成任务到期提醒</div>
                                </div>
                                <label class="switch">
                                    <input type="checkbox" checked>
                                    <span class="slider"></span>
                                </label>
                            </div>
                            
                            <div class="setting-item">
                                <div class="setting-info">
                                    <div class="setting-label">点卡到期提醒</div>
                                    <div class="setting-desc">账号点卡即将到期时提醒</div>
                                </div>
                                <label class="switch">
                                    <input type="checkbox" checked>
                                    <span class="slider"></span>
                                </label>
                            </div>
                            
                            <div class="setting-item">
                                <div class="setting-info">
                                    <div class="setting-label">提醒时间</div>
                                    <div class="setting-desc">每日任务提醒时间</div>
                                </div>
                                <input type="time" class="form-input" value="09:00">
                            </div>
                        </div>
                        
                        <div class="setting-group">
                            <div class="group-title">📧 邮件通知</div>
                            
                            <div class="setting-item">
                                <div class="setting-info">
                                    <div class="setting-label">启用邮件通知</div>
                                    <div class="setting-desc">通过邮件接收重要通知</div>
                                </div>
                                <label class="switch">
                                    <input type="checkbox">
                                    <span class="slider"></span>
                                </label>
                            </div>
                            
                            <div class="setting-item">
                                <div class="setting-info">
                                    <div class="setting-label">周报订阅</div>
                                    <div class="setting-desc">每周发送数据统计报告</div>
                                </div>
                                <label class="switch">
                                    <input type="checkbox" checked>
                                    <span class="slider"></span>
                                </label>
                            </div>
                        </div>
                        
                        <div style="margin-top: 30px;">
                            <button class="btn btn-primary">保存设置</button>
                        </div>
                    </div>
                    
                    <!-- 任务模板 -->
                    <div id="task-section" style="display:none;">
                        <div class="section-title">📋 任务模板管理</div>
                        
                        <div style="margin-bottom: 15px;">
                            <button class="btn btn-primary">➕ 添加任务模板</button>
                            <button class="btn btn-secondary" style="margin-left: 10px;">📥 导入模板</button>
                        </div>
                        
                        <table class="template-table">
                            <thead>
                                <tr>
                                    <th>任务名称</th>
                                    <th>任务分类</th>
                                    <th>默认次数</th>
                                    <th>优先级</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>师门任务</td>
                                    <td>日常任务</td>
                                    <td>20次</td>
                                    <td><span class="priority-badge priority-high">高</span></td>
                                    <td>✅ 启用</td>
                                    <td>
                                        <a class="action-link">编辑</a>
                                        <a class="action-link">禁用</a>
                                        <a class="action-link" style="color:#f5222d;">删除</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>抓鬼任务</td>
                                    <td>日常任务</td>
                                    <td>10次</td>
                                    <td><span class="priority-badge priority-high">高</span></td>
                                    <td>✅ 启用</td>
                                    <td>
                                        <a class="action-link">编辑</a>
                                        <a class="action-link">禁用</a>
                                        <a class="action-link" style="color:#f5222d;">删除</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>封妖任务</td>
                                    <td>日常任务</td>
                                    <td>10次</td>
                                    <td><span class="priority-badge priority-medium">中</span></td>
                                    <td>✅ 启用</td>
                                    <td>
                                        <a class="action-link">编辑</a>
                                        <a class="action-link">禁用</a>
                                        <a class="action-link" style="color:#f5222d;">删除</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>帮派任务</td>
                                    <td>日常任务</td>
                                    <td>10次</td>
                                    <td><span class="priority-badge priority-medium">中</span></td>
                                    <td>✅ 启用</td>
                                    <td>
                                        <a class="action-link">编辑</a>
                                        <a class="action-link">禁用</a>
                                        <a class="action-link" style="color:#f5222d;">删除</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>房屋休息</td>
                                    <td>日常维护</td>
                                    <td>1次</td>
                                    <td><span class="priority-badge priority-high">高</span></td>
                                    <td>✅ 启用</td>
                                    <td>
                                        <a class="action-link">编辑</a>
                                        <a class="action-link">禁用</a>
                                        <a class="action-link" style="color:#f5222d;">删除</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>副本活动</td>
                                    <td>周常任务</td>
                                    <td>3次</td>
                                    <td><span class="priority-badge priority-low">低</span></td>
                                    <td>✅ 启用</td>
                                    <td>
                                        <a class="action-link">编辑</a>
                                        <a class="action-link">禁用</a>
                                        <a class="action-link" style="color:#f5222d;">删除</a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    
                    <!-- 数据备份 -->
                    <div id="backup-section" style="display:none;">
                        <div class="section-title">💾 数据备份与恢复</div>
                        
                        <div class="setting-group">
                            <div class="group-title">⚙️ 自动备份</div>
                            
                            <div class="setting-item">
                                <div class="setting-info">
                                    <div class="setting-label">启用自动备份</div>
                                    <div class="setting-desc">定期自动备份数据</div>
                                </div>
                                <label class="switch">
                                    <input type="checkbox" checked>
                                    <span class="slider"></span>
                                </label>
                            </div>
                            
                            <div class="setting-item">
                                <div class="setting-info">
                                    <div class="setting-label">备份频率</div>
                                    <div class="setting-desc">自动备份的时间间隔</div>
                                </div>
                                <select class="form-input">
                                    <option>每天</option>
                                    <option>每周</option>
                                    <option>每月</option>
                                </select>
                            </div>
                            
                            <div class="setting-item">
                                <div class="setting-info">
                                    <div class="setting-label">备份保留</div>
                                    <div class="setting-desc">最多保留备份数量</div>
                                </div>
                                <select class="form-input">
                                    <option>保留最近5个</option>
                                    <option>保留最近10个</option>
                                    <option>保留最近30个</option>
                                    <option>永久保留</option>
                                </select>
                            </div>
                        </div>
                        
                        <div class="setting-group">
                            <div class="group-title">🔧 备份操作</div>
                            
                            <div class="backup-cards">
                                <div class="backup-card">
                                    <div class="backup-icon">💾</div>
                                    <div class="backup-label">立即备份</div>
                                    <div class="backup-desc">创建当前数据备份</div>
                                </div>
                                
                                <div class="backup-card">
                                    <div class="backup-icon">📥</div>
                                    <div class="backup-label">恢复备份</div>
                                    <div class="backup-desc">从备份文件恢复</div>
                                </div>
                                
                                <div class="backup-card">
                                    <div class="backup-icon">📤</div>
                                    <div class="backup-label">导出数据</div>
                                    <div class="backup-desc">导出为Excel/CSV</div>
                                </div>
                                
                                <div class="backup-card">
                                    <div class="backup-icon">📁</div>
                                    <div class="backup-label">查看备份</div>
                                    <div class="backup-desc">管理所有备份文件</div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="setting-group">
                            <div class="group-title">⚠️ 危险操作</div>
                            
                            <div class="setting-item">
                                <div class="setting-info">
                                    <div class="setting-label">清空所有数据</div>
                                    <div class="setting-desc">删除所有账号、角色和任务记录（不可恢复）</div>
                                </div>
                                <button class="btn btn-danger">清空数据</button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 关于系统 -->
                    <div id="about-section" style="display:none;">
                        <div class="section-title">ℹ️ 关于系统</div>
                        
                        <div style="text-align: center; padding: 40px 0;">
                            <div style="font-size: 60px; margin-bottom: 20px;">⚔️</div>
                            <div style="font-size: 24px; font-weight: bold; color: #667eea; margin-bottom: 10px;">梦幻西游数字资产管理系统</div>
                            <div style="font-size: 16px; color: #999; margin-bottom: 30px;">Fantasy Westward Journey Asset Management System</div>
                            
                            <div style="background: #f9f9f9; padding: 20px; border-radius: 8px; text-align: left; max-width: 500px; margin: 0 auto;">
                                <div style="margin-bottom: 15px;">
                                    <strong>版本号：</strong> v1.0.0
                                </div>
                                <div style="margin-bottom: 15px;">
                                    <strong>发布日期：</strong> 2025-10-03
                                </div>
                                <div style="margin-bottom: 15px;">
                                    <strong>开发者：</strong> 梦幻工作室
                                </div>
                                <div style="margin-bottom: 15px;">
                                    <strong>许可证：</strong> MIT License
                                </div>
                                <div>
                                    <strong>联系方式：</strong> support@mhgame.com
                                </div>
                            </div>
                            
                            <div style="margin-top: 30px;">
                                <button class="btn btn-primary">检查更新</button>
                                <button class="btn btn-secondary" style="margin-left: 10px;">使用文档</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        // 设置菜单切换
        document.querySelectorAll('.settings-menu-item').forEach(item => {
            item.addEventListener('click', function() {
                // 移除所有active
                document.querySelectorAll('.settings-menu-item').forEach(i => i.classList.remove('active'));
                this.classList.add('active');
                
                // 隐藏所有section
                document.querySelectorAll('[id$="-section"]').forEach(s => s.style.display = 'none');
                
                // 显示对应section
                const section = this.dataset.section;
                document.getElementById(section + '-section').style.display = 'block';
            });
        });
    </script>
</body>
</html>
